<script setup lang="ts">
import Node from '../node.vue';
import Add from '../Add.vue';
import type { ExclusiveGateway } from '../type';
import Del from '../Del.vue';

const props = defineProps<{
  data: ExclusiveGateway;
}>();
const emit = defineEmits(['click', 'addNode', 'delNode', 'addCondition', 'delCondition']);
</script>

<template>
  <div class="lg-node lg-exclusive-nade">
    <div class="lg-condition-top">
      <div class="lg-add-condition" @click="emit('addCondition', data)">添加条件</div>
    </div>
    <div class="lg-exclusives">
      <div
        v-for="(item, index) in data.items"
        :class="`lg-exclusive lg-exclusive-${item.status} lg-exclusive-${item.position}`"
        :style="{ '--multiple': item.multiple, '--diff-node': diffNode }"
      >
        <div class="lg-line-horizontal lg-line-top"></div>
        <div class="lg-line-vertical"></div>
        <div class="lg-exclusive-box" @click="emit('click', item)">
          <slot name="condition" v-bind="item">
            <div class="lg-name">{{ item.name }}</div>
            <div class="lg-content">
              <slot v-bind="item">{{ item.description }}</slot>
            </div>
          </slot>
          <Del v-if="!item.isDefault" @click.stop="emit('delCondition', { item, gateway: data, index })" />
        </div>
        <div class="lg-line-vertical">
          <add class="lg-add-node" @click="emit('addNode', { $event, data: item })" />
        </div>
        <div class="lg-line-horizontal lg-line-bottom"></div>
        <node
          v-for="n in item.nodes"
          :key="n.key"
          :data="n"
          @click="emit('click', $event)"
          @add-node="emit('addNode', $event)"
          @del-node="emit('delNode', $event)"
          @add-condition="emit('addCondition', $event)"
          @del-condition="emit('delCondition', $event)"
        >
          <template #default="scope"><slot v-bind="scope"></slot></template>
          <template #task="scope"><slot name="task" v-bind="scope"></slot></template>
          <template #condition="scope"><slot name="condition" v-bind="scope"></slot></template>
        </node>
      </div>
    </div>
    <div :class="`lg-exclusive-${data.status}`">
      <div class="lg-line-vertical">
        <add class="lg-add-node" @click="emit('addNode', { $event, data })" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.lg-exclusives {
  display: flex;
  .lg-exclusive {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .lg-exclusive-box {
      width: 220px;
      min-height: 77px;
      border-radius: 4px;
      background: #fff;
      color: #000;
      position: relative;
      .lg-name {
        background: var(--td-success-color-5);
        color: #fff;
        padding: 0 16px;
        border-radius: 4px 4px 0 0;
      }
      .lg-content {
        padding: 16px;
        border-radius: 0 0 4px 4px;
      }
      .lg-del-btn {
        display: none;
      }
      &:hover {
        .lg-del-btn {
          display: flex;
        }
      }
    }
    :last-child {
      flex: 1;
      .lg-task {
        height: 100%;
        display: flex;
        flex-direction: column;
      }
    }
  }
  .lg-exclusive-left {
    > .lg-line-horizontal {
      left: 50%;
    }
  }
  .lg-exclusive-right {
    > .lg-line-horizontal {
      right: 50%;
    }
  }
  .lg-exclusive + .lg-exclusive {
    margin-left: 32px;
  }
  .lg-exclusive-box + .lg-line-vertical {
    flex: 1;
  }
}
</style>
